<template>
  <div class="header">
    <el-header>
      <div class="title">学生后台管理系统</div>
      <div class="user">
        <!-- <img :src="userInfo.headImg" alt=""> -->
        <div class="userinfo">
          <div class="t">{{userInfo.name}}</div>
          <div @click="loginOut">退出</div>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script setup>
import router from '../../router/index'
import {onMounted,reactive} from 'vue'
import {setToken } from "@/utils/setToken.js";
import {getuser} from '@/api/api'
/**
 * 获取用户信息
 */
 const userInfo=reactive({
  name:'',
  headImg:''
})
onMounted(()=>{
  getUserInfoData()
})
// 用户信息获取
const getUserInfoData=async()=>{
  const res=await getuser()
  console.log('获取到响应拦截器返回的用户信息--',res.data)
  if(res?.data.data.name){
    userInfo.name = res.data.data.name
    // userInfo.headImg=res.data.data.headImg
    setToken("name",res.data.data.name)
  }
}
const loginOut=()=>{
  router.push('/login')
  localStorage.removeItem('name')
  localStorage.removeItem('token')
}
</script>

<style lang="less">
.header {
  .el-header {
    background-color: rgb(78, 119, 161);
    color: #fff;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .title {
      width: 200px;
      font-size: 24px;
    }
    .user {
    display: flex;
    flex-direction: row;
    justify-content: center;

    width: 120px;
    .userinfo{
    display: flex;
    flex-direction: row;
      .t{
        margin-right:10px;
      }
    }
    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }
  }
 
}
</style>